<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环境指数公众版</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/public.css">
	<style>
		.pb-fx-item{
			position: relative;
		}
		.pb-fx-item i{
			font-size: 0.5rem!important;
			display: block;
		}
		.pb-fx-item span{
			display: block;
			font-size: 0.6rem!important;
		}
		.pb-fx-item i sub{
			font-size: 0.5rem!important;
		}
		.pb-fx-item i.suffix{
			font-size: 0.5rem!important;
			padding: 0;
			margin: 0;
			line-height: 100%;
		}
		.loclbtn{
			display:block;
			width:30px;
			height:30px;
			position:absolute;
			right:10px;
			bottom:10px;
			cursor: pointer;
			border:1px solid #efefef;
			background-color:#ffffff;
			line-height: 25px;
			text-align: center;
			border-radius: 20%;
			box-shadow: 1px 1px 3px #666666;
		}
		.loclbtn i{
			position: absolute;
			left: 4px;
			top: 4px;
			width: 20px;
			height: 20px;
			border: 1px solid #0075C7;
			border-radius: 50%;
			background-color: #ffffff;
			z-index: 2;
		}
		.loclbtn b{
			display: block;
			width: 60%;
			height: 60%;
			margin: 20%;
			border-radius: 50%;
			background-color: #0075C7;
		}
		.loclbtn .iv{
			width: 3px;
			height: 100%;
			background-color: #0075C7;
			position: absolute;
			left: 13px;
			top: 0;
			z-index: 1;
			border: 1px solid #ffffff;
		}
		.loclbtn .ih{
			height: 3px;
			width: 100%;
			background-color: #0075C7;
			position: absolute;
			top: 13px;
			left: 0;
			z-index: 1;
			border: 1px solid #ffffff;
		}
        .diyicon{
            position: absolute;
            border-radius: 15%;
            border: 1px solid rgba(255,255,255,0.5);
            color: #ffffff;
            -moz-user-select: none;
            font-size: 12px;
            font-weight: bolder;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            width: 30px;
            height: 20px;
            text-align: center;
            text-shadow: 2px 2px 2px 3px rgba(0,0,0,0.5);
			padding: 2px;
			display: table;
			background-color: RGBA(209, 209, 209, 0.5);
        }
		.diyicon .arrow{
			width:0; 
			height:0; 
			border-left:6px solid transparent;
			border-right:6px solid transparent;
			border-top:6px solid RGBA(150, 150, 150, 0.5);
			position: absolute;
			top:100%;
			left:50%;
			margin-left: -5px;
		}
		.diyicon .cont{
			/*background-color: RGBA(209, 209, 209, 0.5);*/
			display: block;
			width: 100%;
			height: 100%;
            border-radius: 15%;
			display:table-cell;
			vertical-align: middle;
		}
		.BMap_bubble_title{
			font-size: 16px;
		}
		.BMap_bubble_content{
			font-size: 14px;
		}
		/*.infobox{
			padding-top: 0.05rem;
			margin-top: 0.15rem;
		}
		.pb-weather{
			background-color: transparent!important;
			margin-top: 0.25rem!important;
		}
		.pb-tiptxt{
			background-color: transparent!important;
		}*/
	</style>
	<script type="text/javascript">
		/**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * eg:
   * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
   * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
   * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
   * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
   */
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
      "H+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    var week = {
      "0": "\u65e5",
      "1": "\u4e00",
      "2": "\u4e8c",
      "3": "\u4e09",
      "4": "\u56db",
      "5": "\u4e94",
      "6": "\u516d"
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
	</script>
</head>
<body style="overflow-x: hidden">
	<header>
		<div class="pb-title">空气质量指数</div>
		<div class="pb-layout">
			<div class="pb-lay-bg"></div>
			<div class="clearfix" style="z-index:2">
				<div class="pb-tit-num">-</div>
				<div class="pb-tit-lv">-</div>
			</div>
			<div class="pb-tit-wuran">
				<span class="pb-wr-txt">首要污染物</span>
				<span class="pb-wr-zb">-</span>
			</div>
		</div>
		<div class="infobox">
			<div class="pb-weather">-</div>
			<div class="pb-tiptxt">
				<span>各类人群可正常活动</span>
				<span>极少数异常敏感人群应减少户外活动</span>
				<span>儿童、老年人及心脏病、呼吸系统病患者应减少长时间、高强度的户外锻炼</span>
				<span>儿童、老年人及心脏病、呼吸系统病患者应避免长时间、高强度的户外锻炼，一般人群适量减少户外运动</span>
				<span>儿童、老年人及心脏病、肺病患者应停留在室内，停止户外运动，一般人群减少户外运动</span>
				<span>儿童、老年人和病人应当停留在室内，避免体力消耗，一般人群应避免户外运动</span>
			</div>
		</div>
	</header>
	
	<div class="pb-content">
		<div class="flex-row pb-zb-items">
			<span class="flex-row-item pb-fx-item">
				<i>PM<sub>2.5</sub></i>
				<span id='rt-aqi-pm25'>-</span>
				<i class="suffix">ug/m³</i>
			</span>
			<span class="flex-row-item pb-fx-item">
				<i>SO<sub>2</sub></i>
				<span id='rt-aqi-so2'>-</span>
				<i class="suffix">ug/m³</i>
			</span>
			<span class="flex-row-item pb-fx-item">
				<i>NO<sub>2</sub></i>
				<span id='rt-aqi-no2'>-</span>
				<i class="suffix">ug/m³</i>
			</span>
			<span class="flex-row-item pb-fx-item">
				<i>PM<sub>10</sub></i>
				<span id='rt-aqi-pm10'>-</span>
				<i class="suffix">ug/m³</i>
			</span>
			<span class="flex-row-item pb-fx-item">
				<i>CO<sub></sub></i>
				<span id='rt-aqi-co'>-</span>
				<i class="suffix">mg/m³</i>
			</span>
			<span class="flex-row-item pb-fx-item">
				<i>O<sub>3</sub></i>
				<span id='rt-aqi-o3'>-</span>
				<i class="suffix">ug/m³</i>
			</span>
		</div>
		
		<div class="pb-map-chart" style="border-bottom:2px solid #eeeeee;position: relative;">
			<div id="allmap" style="height: 10rem;"></div>
			<span style="display:none;" id="loclbtn" class="loclbtn" onclick="localToPoint()"><i><b></b></i><span class="iv"></span><span class="ih"></span></span>
		</div>
		
		<div class="pb-score-list" style="display:none;">
			<span class="pb-sc-con">
				<i class="iconfont icon-liuliangxinxishangbao pb-small"></i>
				<span class="pb-twhite">空气质量排名:</span>
				<i class="iconfont icon-gongsi"></i>
				<span class="pb-tgrey">省内第<b id='js-order-val'>-</b>名</span>
				<i class="iconfont icon-gongsi"></i>
				<span class="pb-tgrey">全国74城市第<b id='csj-order-val'>-</b>名</span>
			</span>
		</div>
		
		<!--<div class="pb-chart-legend flex-row" style="border-top:1px solid #08A321;">
			<span data-idx="0" class="active flex-row-item aqi-chart-time">每小时</span>
			<span data-idx="1" class="flex-row-item aqi-chart-time">每天</span>
		</div>-->
		<div class="order-hd">
            <div class="order-hd-title">今日空气质量及污染物趋势</div>
        </div>
		<div class="pb-tip-txt">点击下面的按钮查看指标</div>
		
		<div class="pb-zhibiao-legend flex-row">
		    <span class="active flex-row-item zb-item color-aqi">AQI<b>1</b></span>
			<span class="flex-row-item zb-item color-pm25">PM<sub>2.5</sub><b>2</b></span>
			<span class="flex-row-item zb-item color-so2">SO<sub>2</sub><b>3</b></span>
			<span class="flex-row-item zb-item color-no2">NO<sub>2</sub><b>4</b></span>
			<span class="flex-row-item zb-item color-pm10">PM<sub>10</sub><b>5</b></span>
			<span class="flex-row-item zb-item color-co">CO<b>6</b></span>
			<span class="flex-row-item zb-item color-o3">O<sub>3</sub><b>7</b></span>
		</div>
		
		<div class="pb-line-chart" id="aqi-chart"></div>
	</div>
</body>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/function_public.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EO5oHjEfgBz7QieWfqG08jcx"></script>
<script>
/*请求地址全局变量*/
// var RequestUrl = '.';
var RequestUrl = 'http://58.213.141.220:8989/njhbindex';
var tapidx=0;
var AQIChartCache={};

/*----------------start------------------*/
//天气预报
findWeather(RequestUrl+'/weather');

//首要污染物
getJSONData(RequestUrl+"/data?act=aqin&areacode=2000",function(data){
	if(data.Error==null){
		var aqidata=data.Data;
		aqidata.forEach(function(e,i){
			$('.pb-tit-wuran span.pb-wr-zb').html(getAQIItemByCode(e.first));
			$('#rt-aqi-pm25').text(parseInt(e.pm25)).css({'color':parseInt(e.ipm25)>50&&parseInt(e.ipm25)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ipm25))});
			$('#rt-aqi-pm10').text(parseInt(e.pm10)).css({'color':parseInt(e.ipm10)>50&&parseInt(e.ipm10)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ipm10))});
			$('#rt-aqi-no2').text(parseInt(e.no2)).css({'color':parseInt(e.ino2)>50&&parseInt(e.ino2)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ino2))});
			$('#rt-aqi-so2').text(parseInt(e.so2)).css({'color':parseInt(e.iso2)>50&&parseInt(e.iso2)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.iso2))});
			$('#rt-aqi-co').text(parseFloat(e.co)).css({'color':parseInt(e.ico)>50&&parseInt(e.ico)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.ico))});
			$('#rt-aqi-o3').text(parseInt(e.o3)).css({'color':parseInt(e.io3)>50&&parseInt(e.io3)<=100?'#7A469D':'#ffffff','background-color':num2color(parseInt(e.io3))});
			$('.pb-tit-num').text(e.aqi);
			$('header').css({'text-shadow':parseInt(e.aqi)>50&&parseInt(e.aqi)<=100?'-1px 1px 1px rgba(255,255,255,0.75)':'-1px 1px 1px rgba(0,0,0,0.35)','background-color':num2color(parseInt(e.aqi)),'color':parseInt(e.aqi)>50&&parseInt(e.aqi)<=100?'#7A469D':'#ffffff' ,'background-image':'url(./assets/img/qpbg'+(num2table(parseInt(e.aqi)).idx+1)+'.png)'});
			$('.pb-tit-lv').text(e.note);
			$('.pb-tiptxt span').eq(num2table(e.aqi).idx).css({'display':'inline-block'});
		});
	}else{
		console.log(data.Error);
	}
});

//排名
get_citys_order();


AQIChange(RequestUrl+'/data?act=aqih&areacode=2000',0);
// AQIChange(RequestUrl+'/data?act=aqid&areacode=2000',1);
	
touch.on('.aqi-chart-time', 'tap', function(ev){
	tapidx=ev.target.getAttribute('data-idx');
	$('.aqi-chart-time').removeClass('active').eq(tapidx).addClass('active');
	//change chart
	var cd=AQIChartCache[tapidx];
	AQIChart(cd.time,cd.aqi,cd.pm,cd.so,cd.no,cd.pm2,cd.co,cd.o);
});

$(document).on('click','.zb-item',function(){
	var disable=$(this).hasClass('active');
	if(disable==true){
		$(this).removeClass('active');
	}else{
		$(this).addClass('active');
	}
	var cd=AQIChartCache[tapidx];
	AQIChart(cd.time,cd.aqi,cd.pm,cd.so,cd.no,cd.pm2,cd.co,cd.o);
});

/*----------------end------------------*/
var host=RequestUrl;
var geocoords={
		'市区':[118.78,32.04],
		'草场门':[118.754582,32.05529],
		'中华门':[118.775235,32.002362],
		'瑞金路':[118.812434,32.031725],
		'玄武湖':[118.798074,32.075852],
		'山西路':[118.774462,32.070624],
		'迈皋桥':[118.80807,32.106597],
		'仙林大学城':[118.91689,32.113268],
		'奥体中心':[118.741109,32.00713],
		'浦口':[118.643734,32.073008],
		'江宁彩虹桥':[118.83103301970846,31.9280910197085],
		'高淳淳溪':[118.890583,31.3294],
		'六合雄州':[118.839798,32.359663],
		'溧水永阳':[119.019125,31.648064],
		'江北化工园':[118.811028, 32.260928],
		'将军大道':[118.831033, 31.928091]
	};
var areas={
	2000:['市区','市区','nj'],
	2001:['草场门','鼓楼区','glq',[119.995278, 31.758333]],
	2002:['中华门','雨花台区','yhtq',[119.933056, 31.778611]],
	2003:['瑞金路','秦淮区','qhq',[119.961944, 31.808889]],
	2004:['玄武湖','玄武区','xwq',[119.935, 31.703889]],
	2006:['山西路','鼓楼区','glq',[119.904722, 31.910833]],
	2007:['迈皋桥','栖霞区','xxq',[120.039167, 31.763611]],
	2008:['仙林大学城','栖霞区','xxq',[119.455833, 31.4]],
	2009:['奥体中心','建邺区','jyq',[119.474722, 31.400833]],
	2010:['浦口','浦口区','pkq',[119.448056, 31.307778]],
	2011:['江北化工园','六合区','lhq',[118.811028, 32.260928]],
	2013:['高淳淳溪','高淳区','gcq',[118.890583, 31.3294]], //区
	2016:['江宁彩虹桥','江宁区','jnq',[118.831033, 31.928091]],//区
	2018:['将军大道','江宁区','jnq',[118.831033, 31.928091]],
	2022:['六合雄州','六合区','lhq',[118.839798, 32.359663]],//区
	2024:['溧水永阳','溧水区','lsq',[119.019125, 31.648064]]//区
};
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(118.78,32.04);
map.centerAndZoom(point, 12);
	
function getAQI(aqi){
	var num=parseInt(aqi);
	if(isNaN(num)) return null;
	return num
}
var mk=null,circles={};
function localToPoint(){
	//定位
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var ps=moveTo(r.point.lng,r.point.lat);
			r.point.lng=ps[0];
			r.point.lat=ps[1];
			if(mk!=null) map.removeOverlay(mk);
			if(ps[2]==false){
				var myIcon = new BMap.Icon("./assets/img/mr.png", new BMap.Size(36,38));
				mk = new BMap.Marker(r.point,{icon:myIcon});
				map.addOverlay(mk);
			}
			map.panTo(r.point);		
		}
		else {
			console.log('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true});
}
function addCircle(id,point,color){
    circles[id]= new BMap.Circle(point,500,{fillColor:color, strokeWeight: 0 ,fillOpacity: 1, strokeOpacity: 0});
    map.addOverlay(circles[id]);
}
var myPoint={lon:118.783941,lat:32.041631};
function moveTo(longitude, latitude) {
	var out=false;
	// 在南京外面的定位  强制拉到新街口
   if (longitude < 118.48158925991368 ||
   		 longitude > 119.14076894741368 ||
		    latitude > 32.20241194404216 ||
		     latitude < 31.924552839077077) {
       longitude = 118.783941;
       latitude = 32.041631;
	   out=true;
	   alert('你的地理位置已经超出南京市范围, 地图将定位到南京新街口！');
   }
   if(out==false){
        var point=new BMap.Point(longitude,latitude);
        if(mk!=null) map.removeOverlay(mk);
        var myIcon = new BMap.Icon("./assets/img/mr.png", new BMap.Size(36,38));
		mk = new BMap.Marker(point,{icon:myIcon});
		map.addOverlay(mk);
        map.panTo(point);
   }
   myPoint={
	  lon:longitude
	  ,lat:latitude
   }
   return [longitude,latitude,out]
}

function num2color(num){
	var num=parseInt(num),alpha=0.95;
	var color='rgba(0,228,0,'+alpha+')';
	if(num<=50){
		color='rgba(0,228,0,'+alpha+')';
	}else if(50<num&&num<=100){
		color='rgba(255,255,0,'+alpha+')';
	}else if(100<num&&num<=150){
		color='rgba(255,126,0,'+alpha+')';
	}else if(150<num&&num<=200){
		color='rgba(255,0,0,'+alpha+')';
	}else if(200<num&&num<=300){
		color='rgba(153,0,76,'+alpha+')';
	}else if(num>300){
		color='rgba(126,0,35,'+alpha+')';
	}
	return color
}
function num2table(num){
	var num=parseInt(num);
	var idx=0,note='';
	if(num<=50){
		idx=0;
		note='优秀';
	}else if(50<num&&num<=100){
		idx=1;
		note='良好';
	}else if(100<num&&num<=150){
		idx=2;
		note='轻度污染';
	}else if(150<num&&num<=200){
		idx=3;
		note='中度污染';
	}else if(200<num&&num<=300){
		idx=4;
		note='重度污染';
	}else if(num>300){
		idx=5;
		note='严重污染';
	}
	return {idx:idx,note:note}
}
// 南京监测点
getJSONData(host+"/data?act=aqiarean",function(data){
	if(data.Error==null){
		var d=data.Data;
		for(var i in d){
			if(i==2018||i==2011||i==2000) continue;
			var name=areas[i][0];
			var point=new BMap.Point(geocoords[name][0],geocoords[name][1])
				,color=num2color(d[i].aqi);
			var myCompOverlay = new ComplexCustomOverlay(i, point, d[i].aqi, color);
			map.addOverlay(myCompOverlay);
		}
	}
});
// 复杂的自定义覆盖物
function ComplexCustomOverlay(id,point, aqi, color){
	this._id=id;
	this._point = point;
	this._text = aqi;
	this._color=color;
	this._overText = areas[id][0]+' AQI: '+aqi+' ('+num2table(aqi).note+')';;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
	var that = this;
	this._map = map;
	var bgcolor=this._color;//this._text>50&&this._text<=100?'#7A469D':'#ffffff';
	var div = this._div = document.createElement("div");
	div.setAttribute('class','diyicon');
	div.style.position = "absolute";
	div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
	div.style.color = this._text>50&&this._text<=100?'#7A469D':'#ffffff';;
	div.style.border='0 solid #ccc';
	div.style.backgroundColor=bgcolor;
	
	var span = this._span = document.createElement("span");
	span.setAttribute('class','cont');
	// span.style.backgroundColor = this._text<=150?'RGBA(0, 0, 0, 0.1)':'rgba(255,255,255,0.5)';
	div.appendChild(span);
	span.appendChild(document.createTextNode(this._text));

	var arrow = document.createElement("span");
	arrow.setAttribute('class','arrow');
	arrow.style.borderTopColor=bgcolor;
	div.appendChild(arrow);
	
	div.addEventListener('touchstart',function(){
		var opts = {
		width : 0,     // 信息窗口宽度
		height: 0,     // 信息窗口高度
		title : "空气质量:" , // 信息窗口标题
		enableMessage:true//设置允许信息窗发送短息
		}
		var infoWindow = new BMap.InfoWindow(that._overText, opts);
		map.openInfoWindow(infoWindow,that._point); //开启信息窗口
	//   this.getElementsByTagName("span")[0].innerHTML = that._overText;
	},false);

	map.getPanes().labelPane.appendChild(div);
	
	return div;
}
ComplexCustomOverlay.prototype.draw = function(){
	var map = this._map;
	var pixel = map.pointToOverlayPixel(this._point);
	this._div.style.left = pixel.x-15 + "px";
	this._div.style.top  = pixel.y - 30 + "px";
}
</script>
</html>